<template>
  <!-- 邮件列表 -->
  <div class="email_message_list">
    <!-- 头部 -->
    <my-header :left="true" :title="title">
      <template #right_icon>
        <span class="title_font" ref="bianjiBtn" @click="bianji">{{bian_font}}</span>
      </template>
    </my-header>
    <!-- 消息展示列表 -->
    <div v-if="isRander" class="email_item_warp">
      <email-item
        class="email_item"
        :class="item.isRead ? 'read':''"
        :style="{paddingLeft:email_item_pl}"
        v-for="item in email_data"
        :key="item.eid"
        :data="item"
        :params="item.eid"
        :message="item.count">
        <template #chooes>
          <div class="radio" :style="{opacity:opacity}" @click="chooesdelete(item.eid)">
            <img :class="chooes_email.indexOf(item.eid) != -1 ? 'run':''" src="../../../assets/img/coll/chooes.png">
          </div>
        </template>
        </email-item>
    </div>
    <div v-if="!isRander">
      <van-loading class="mt60" size="0.24rem" vertical>数据加载中...</van-loading>
    </div>
    <!-- 没有数据 -->
    <div v-if="isRander && email_data.length == 0">
      <center class="notdata mt60">
        暂无数据
      </center>
    </div>
    <!-- 底部删除部分 -->
    <div class="foonter_div" :style="{bottom:bott}">
      <!-- 左面部分 -->
      <span v-if="chooes_email.length == 0" @click="readAll">全部已读</span>
      <span v-else :class="unread_eid.length > 0 ? '':'disable'" @click="readEmail">已读</span>
      <!-- 右面部分 -->
      <span :class="chooes_email.length > 0 ? '':'disable'" @click="deleteEmail">删除</span>
    </div>
  </div>
</template>
<script>
import MyHeader from "../../common/Header";
import EmailItem from "./EmailItem";
import {mapGetters} from "vuex";
export default {
  name: "MessageList",
  components: {
    MyHeader,
    EmailItem,
  },
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    }),
  },
  data() {
    return {
      email_data: null, // 邮件数据
      chooes_email:[],// 即将删除的邮件ID
      unread_eid:[],//未读邮件的EID
      isRander:false,// 是否渲染页面
      title:"",// 邮件类型标题
      etypeid:"",// 当前列表邮件类型ID
      // 样式控制部分
      bian_font:"编辑",// 编辑部分字展示
      email_item_pl:"0.1rem",
      bott:"-0.48rem",
      opacity:"0"
    };
  },
  created() {
    this.getEmailList();
  },
  methods: {
    // 请求邮件数据
    async getEmailList() {
      // console.log(this.$route.query.id);
      this.isRander = false;
      const { data: res } = await this.$http.get("emaillist", {
        params: { type: this.$route.query.id },
      });
      if(!res.isok) return this.$message({position:"center",message:res.message});
      this.email_data = res.data.email_data;
      this.title = res.data.email_type.title;
      this.etypeid = res.data.email_type.typeId;
      this.isRander = true;
      console.log(res);
    },
    // 编辑站内信
    bianji(){
      this.email_item_pl = this.email_item_pl == "0.1rem" ? "0.4rem" : "0.1rem"
      this.bian_font = this.bian_font == "编辑" ? "取消":"编辑"
      this.bott = this.bott == "-0.48rem" ? "0rem":"-0.48rem"
      this.opacity = this.opacity == "0" ? "1" : "0"
    },
    // 选择删除
    chooesdelete(eid){
      if(this.chooes_email.indexOf(eid) != -1){
        // 移除
        this.chooes_email.remove(eid);
      }else{
        // 添加
        this.chooes_email.push(eid);
      }
      this.unread();
    },
    // 计算当前选中的邮件里是否有未读项
    unread(){
      this.unread_eid = [];// 重置未读邮件的EID
      // 如果长度为0
      if(this.chooes_email.length == 0){
        return;
      }
      // 循环获取
      for (let index = 0; index < this.chooes_email.length; index++) {
        // 去邮件数据里获取该EID是否已读
        if(!this.email_data){
          return;
        }
        for (let index2 = 0; index2 < this.email_data.length; index2++) {
          if(this.email_data[index2].eid == this.chooes_email[index]){// 找到了邮件
            if(this.email_data[index2].isRead){// 如果为true代表已读
              break;
            }
            // 不为true 添加 到数组
            this.unread_eid.push(this.email_data[index2].eid);
          }
        }
      }
    },
    // 已读所有邮件
    async readAll(){
      let isok = await this.$dialog.confirm({
        message: '是否确认已读当前列表所有邮件',
      }).catch(() => {
        console.log("取消全部已读操作");
      })
      // console.log(isok);
      if(isok == "confirm"){
        const {data:res} = await this.$http.post("readMoreEmailByType",{etype:this.etypeid});
        if(!res.isok) return this.$message({position:"center",message:res.message});
        // 刷新数据
        await this.getEmailList();
        this.$refs.bianjiBtn.click();
      }
    },
    // 已读部分邮件
    async readEmail(){
      let isok = await this.$dialog.confirm({
        message: '是否确认已读已选邮件',
      }).catch(() => {
        console.log("取消已读已选操作");
      })
      if(isok == "confirm"){
        let str = this.unread_eid.join(",");
        const {data:res} = await this.$http.post("readEmail",{eid:str});
        console.log(res);
        if(!res.isok) return this.$message({position:"center",message:res.message});
        // 刷新数据
        await this.getEmailList();
        this.$refs.bianjiBtn.click();
      }
    },
    // 执行删除操作
    async deleteEmail(){
      let isok = await this.$dialog.confirm({
        message: '是否确认删除当前所选邮件',
      }).catch(() => {
        console.log("取消删除操作");
      })
      if(isok == "confirm"){
        let str = this.chooes_email.splice(",");
        const {data:res} = await this.$http.post("deleteEmailByEID",{eid:str});
        if(!res.isok) return this.$message({position:"center",message:res.message});
        // 刷新数据
        await this.getEmailList();
        this.$refs.bianjiBtn.click();
      }
    }
  },
};
</script>
<style lang="less" scoped>
.title_font {
  font-size: 0.15rem;
}
.email_message_list {
  min-height: 100%;
  padding-top: 0.45rem;
  padding-bottom: 0.48rem;
}
.email_item_warp{
  background-color: #FFF;
  overflow: hidden;
}
.email_item{
  transition: all .2s;
  box-sizing: border-box;
  width: 100%;
}
.radio{
  position: absolute;
  z-index: 2;
  width: 0.176rem;
  height: 0.176rem;
  border-radius: 100%;
  top: 50%;
  left: 0.11rem;
  transform: translateY(-50%);
  border: 0.01rem solid #888;
  img{
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(170deg);
    width: 120%;
    height: 120%;
    transition: opacity .3s ease,transform .3s ease;
  }
}
.run{
  opacity: 1 !important;
  transform: translate(-50%,-50%) rotate(0deg) !important;
}
.foonter_div{
  position: fixed;
  z-index: 2;
  height: 0.48rem;
  width: 100%;
  background-color: #FFF;
  transition:all .3s;
  font-size: 0.14rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0rem 0.1rem;
}
.disable{
  color: #888888;
}
.read{
  /deep/.email_item{
    opacity: 0.6;
  }
}
</style>